<template>
    <div class="activity-detail">
      <swiper  class="swiper" indicator-active-color="#EF5A56" circular="true" indicator-color="#C7C7C7" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
        <block v-for="(item, index) in exchange.images_arr" :index="index" :key="key">
          <swiper-item>
            <img :src="picPre + item" class="slide-image" mode="widthFix"/>
          </swiper-item>
        </block>
      </swiper>
      <div class="activity-detail-title">
        <p>{{exchange.title}}</p>
        <p>{{exchange.integral}}积分兑换</p>
      </div>
      <div class="activity-detail-content">
        <p>兑换规则</p>
        <p v-html="exchange.describe">
        </p>
        <p>
          积分一经使用，不支持退换。
        </p>
      </div>
      <div class="activity-detail-footer">
        <p v-if="exchange.num === '0'" style="background-color: #bebebe">已抢光</p>
        <p v-else ﻿@tap="exchangeGift(exchange.id)">立即兑换</p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "detail",
      data(){
          let that = this;
          return{
            picPre: that.$api.picPre,
            id: "",
            exchange:{},
            isClick:true
          }
      },
      methods:{
        exchangeGift(id){
          let that = this;
          ﻿uni.showModal({
            title: '兑换提示',
            content: '是否立即兑换？',
            success (res) {
              if (res.confirm) {
                if(that.isClick) {
                  that.isClick = false;
                  setTimeout(() => {
                    that.isClick = true;
                  }, 3000);//一秒内不能重复点击
                  that.$ajax
                    .post(that.$api.wealExchange,{weal_id:id})
                    .then(res => {
						uni.navigateTo({
							url:'/activity/success'
						})
                    })
                    .catch(err => {
                      ﻿uni.showToast({
                        title: err,
                        icon: 'none',
                        duration: 2000
                      })
                    });
                }
              }
            }
          });
        },
        getWealDetail(){
          this.$ajax
            .post(this.$api.wealDetail,{id:this.id})
            .then(res => {
              this.exchange = res;
            })
            .catch(err => {
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
      },
      onLoad(res){
          this.id = res.id;
          this.getWealDetail();
      },
      onPullDownRefresh(){
        this.getWealDetail();
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
    }
</script>

<style scoped>
  .activity-detail{
    padding: 0 30rpx;
  }
  .activity-detail>img{
    width: 100%;
  }
  .activity-detail-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 39rpx 0 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
  }
  .activity-detail-title>p:first-child{
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
    width: 65%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .activity-detail-title>p:last-child{
    font-size: 24rpx;
    color: #EF5A56;
    font-weight: bold;
    line-height: 20rpx;
  }
  .activity-detail-content>p{
    font-weight: bold;
    font-size: 24rpx;
    line-height: 30rpx;
  }
  .activity-detail-content>p:first-child{
    font-size: 26rpx;
    color: #323232;
    margin-top: 19rpx;
    margin-bottom: 28rpx;
  }
  .activity-detail-content>p:last-child{
    color: #EF5E56;
  }
  .activity-detail-footer{
    height: 90rpx;
    width: 100%;
    border-top: 2rpx solid #eeeeee;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .activity-detail-footer>p{
    width: 298rpx;
    height: 98rpx;
    background-color: #EF5A56;
    text-align: center;
    line-height: 98rpx;
    position: absolute;
    left: 50%;
    margin-left: -149rpx;
    margin-top: -10rpx;
    color: #FFFFFF;
    font-size: 34rpx;
  }
  .slide-image {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 20rpx;
  }
</style>
